/*
  classes for storybook only
  TODO remove them from output
*/

/*----------------------------------------*\
  STORYBOOK ICONS PRESENTATION
\*----------------------------------------*/
.storybook-icon-list {
  @apply grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-5;
}

.storybook-icon-cc-list {
  @apply flex flex-wrap gap-5;
}

.storybook-icon {
  @apply flex flex-col items-center;
  @apply border border-gray-100;
  @apply shadow hover:shadow-lg transition-shadow;
}

.storybook-icon__text {
  @apply text-xs bg-gray-50 p-2 w-full text-center;
}

/* Color Presentation */

.storybook-color-list {
  @apply m-0 p-0 min-w-0 flex-1;
  @apply grid grid-cols-2 gap-3;
  @apply sm:grid-cols-4;
  @apply md:grid-cols-5;
  @apply lg:grid-cols-10 lg:gap-1;
}

.storybook-color-list__title {
  @apply col-span-full mt-12 mb-3 text-2xl font-bold capitalize;
}

.storybook-color {
  @apply shadow-lg rounded overflow-hidden;
}

.storybook-color__palette {
  @apply h-16 w-full ring-1 ring-inset ring-black ring-opacity-0;
}

.storybook-color__text {
  @apply p-3 text-sm text-text-500;
}

/* Background presentation */

.storybook-backgrounds > div {
  @apply p-6 pl-7 mb-1 shadow-lg rounded overflow-hidden;
}

.storybook-demo-grid [class^='grid'] > div,
.storybook-demo-grid .container--grid > div,
.storybook-demo-grid .container > div {
  @apply p-6 text-center text-xl text-purple-900;
  @apply bg-purple-50;
  @apply border border-dashed border-purple-600;
}

.storybook-demo-mobile-menu .mobile-menu {
  @apply relative;

  & ul {
    @apply bg-white;
  }
}

.storybook-demo-spacings {
  #main-content {
    min-height: auto;
  }
}

.storybook-demo-ratio .grid > div > div > * {
  @apply p-6 text-center text-xl text-purple-900;
  @apply bg-purple-50;
  @apply border border-dashed border-purple-600;
}

.storybook-show-container,
.storybook-show-container section {
  @media (min-width: theme('screens.md')) {
    background: linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(0 * 100% / 12 + 0px) 0/2.25rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(12 * 100% / 12 + 0px) 0/2.25rem 100%;
  }
  background-repeat: no-repeat;

  @media (min-width: theme('screens.lg')) {
    background: linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(0 * 100% / 12 + 0px) 0/2.5rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(12 * 100% / 12 + 0px) 0/2.5rem 100%;
  }
  background-repeat: no-repeat;

  @media (min-width: theme('screens.xl')) {
    background: linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(0 * 100% / 12 + 0px) 0/3rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(12 * 100% / 12 + 0px) 0/3rem 100%;
  }
  background-repeat: no-repeat;

  @media (min-width: theme('screens.3xl')) {
    background: linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(0 * 100% / 12 + 0px) 0/4rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(12 * 100% / 12 + 0px) 0/4rem 100%;
  }
  background-repeat: no-repeat;
}

.storybook-show-grid,
.storybook-show-grid .container--grid {
  @media (min-width: theme('screens.md')) {
    background: linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(0 * 100% / 12 + 0px) 0/2.25rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(12 * 100% / 12 + 0px) 0/2.25rem 100%;
  }
  background-repeat: no-repeat;

  @media (min-width: theme('screens.lg')) {
    background: linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(0 * 100% / 12 + 0px) 0/2.5rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(1 * 100% / 12 + 0px) 0/2.5rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(2 * 100% / 12 + 0px) 0/2.5rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(3 * 100% / 12 + 0px) 0/2.5rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(4 * 100% / 12 + 0px) 0/2.5rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(5 * 100% / 12 + 0px) 0/2.5rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(6 * 100% / 12 + 0px) 0/2.5rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(7 * 100% / 12 + 0px) 0/2.5rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(8 * 100% / 12 + 0px) 0/2.5rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(9 * 100% / 12 + 0px) 0/2.5rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(10 * 100% / 12 + 0px) 0/2.5rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(11 * 100% / 12 + 0px) 0/2.5rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(12 * 100% / 12 + 0px) 0/2.5rem 100%;
  }
  background-repeat: no-repeat;

  @media (min-width: theme('screens.xl')) {
    background: linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(0 * 100% / 12 + 0px) 0/3rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(1 * 100% / 12 + 0px) 0/3rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(2 * 100% / 12 + 0px) 0/3rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(3 * 100% / 12 + 0px) 0/3rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(4 * 100% / 12 + 0px) 0/3rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(5 * 100% / 12 + 0px) 0/3rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(6 * 100% / 12 + 0px) 0/3rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(7 * 100% / 12 + 0px) 0/3rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(8 * 100% / 12 + 0px) 0/3rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(9 * 100% / 12 + 0px) 0/3rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(10 * 100% / 12 + 0px) 0/3rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(11 * 100% / 12 + 0px) 0/3rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(12 * 100% / 12 + 0px) 0/3rem 100%;
  }
  background-repeat: no-repeat;

  @media (min-width: theme('screens.3xl')) {
    background: linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(0 * 100% / 12 + 0px) 0/4rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(1 * 100% / 12 + 0px) 0/4rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(2 * 100% / 12 + 0px) 0/4rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(3 * 100% / 12 + 0px) 0/4rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(4 * 100% / 12 + 0px) 0/4rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(5 * 100% / 12 + 0px) 0/4rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(6 * 100% / 12 + 0px) 0/4rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(7 * 100% / 12 + 0px) 0/4rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(8 * 100% / 12 + 0px) 0/4rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(9 * 100% / 12 + 0px) 0/4rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(10 * 100% / 12 + 0px) 0/4rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(11 * 100% / 12 + 0px) 0/4rem 100%,
      linear-gradient(rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05))
        calc(12 * 100% / 12 + 0px) 0/4rem 100%;
  }
  background-repeat: no-repeat;
}

.storybook-bg-negative {
  @apply bg-secondary-600 !important;
}
